<template>
  <div class="list-container">
    <div class="header-section">
      <h1 class="page-title">数据看板 <span class="badge">{{ totalItems }}</span></h1>
      <div class="search-box">
        <input 
          v-model="searchQuery"
          placeholder="数据项..."
          @input="handleSearch"
          class="search-input"
        >
        <button class="search-btn">
          <i class="icon">🔍</i>
        </button>
      </div>
    </div>
    <div v-if="loading" class="skeleton-loader">
      <div v-for="i in 5" :key="i" class="skeleton-item"></div>
    </div>
    <template v-else>
      <div class="data-grid">
        <div 
          v-for="item in filteredItems" 
          :key="item.id" 
          class="data-card"
          @mouseenter="hoverItem = item.id"
          @mouseleave="hoverItem = null"
        >
          <div class="card-header">
            <i class="icon">📊</i>
            <span class="data-id">#{{ item.id }}</span>
          </div>
          <div class="data-content">
            {{ item.name }}
            <div class="hover-content" :class="{ active: hoverItem === item.id }">
              <button class="detail-btn" @click="showDetail(item)">查看详情</button>
            </div>
          </div>
          <div class="data-tag" :style="{ backgroundColor: getRandomColor() }">
            {{ getRandomTag() }}
          </div>
        </div>
      </div>

      <div class="pagination-wrapper">
        <div class="pagination-controls">
          <button 
            class="pagination-btn prev"
            :disabled="currentPage === 1"
            @click="changePage(currentPage - 1)"
          >
            ← 上一页
          </button>
          
          <div class="page-indicator">
            <span v-for="page in visiblePages" 
                  :key="page"
                  class="page-number"
                  :class="{ active: page === currentPage }"
                  @click="changePage(page)">
              {{ page }}
            </span>
            <span v-if="showEllipsis" class="ellipsis">...</span>
          </div>

          <button 
            class="pagination-btn next"
            :disabled="currentPage === totalPages"
            @click="changePage(currentPage + 1)"
          >
            下一页 →
          </button>
        </div>
        
        <div class="page-size-selector">
          <select v-model="pageSize" @change="handlePageSizeChange">
            <option v-for="size in pageSizes" :key="size" :value="size">
              每页 {{ size }} 项
            </option>
          </select>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      loading: true,
      currentPage: 1,
      totalPages: 5,
      pageSize: 10,
      searchQuery: '',
      hoverItem: null,
      pageSizes: [5, 10, 20, 50],
      visiblePageCount: 5,
      totalItems: 128
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => 
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    },
    visiblePages() {
      const start = Math.max(1, this.currentPage - Math.floor(this.visiblePageCount / 2));
      const end = Math.min(this.totalPages, start + this.visiblePageCount - 1);
      return Array.from({ length: end - start + 1 }, (_, i) => start + i);
    },
    showEllipsis() {
      return this.totalPages > this.visiblePageCount && 
             this.currentPage + Math.floor(this.visiblePageCount / 2) < this.totalPages;
    }
  },
  methods: {
    fetchData(page = 1) {
      this.loading = true;
      setTimeout(() => {
        this.items = Array.from({ length: this.pageSize }, (_, i) => ({
          id: (page - 1) * this.pageSize + i + 1,
          name: `数据项 ${Math.floor(Math.random() * 1000)}`
        }));
        this.currentPage = page;
        this.loading = false;
      }, 800);
    },
    changePage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.fetchData(page);
      }
    },
    handleSearch() {
      // 实际项目中这里应该调用防抖的搜索API
    },
    handlePageSizeChange() {
      this.totalPages = Math.ceil(this.totalItems / this.pageSize);
      this.fetchData(1);
    },
    getRandomColor() {
      const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#ff9f89'];
      return colors[Math.floor(Math.random() * colors.length)];
    },
    getRandomTag() {
      const tags = ['重要', '进行中', '已完成', '待审核', '高优先级'];
      return tags[Math.floor(Math.random() * tags.length)];
    },
    showDetail(item) {
      console.log('查看详情:', item);
    }
  },
  created() {
    this.fetchData();
  }
};
</script>

<style scoped>
:root {
  --primary-color: #2c3e50;
  --secondary-color: #3498db;
  --background: #f8f9fa;
  --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.list-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.page-title {
  font-size: 2rem;
  color: var(--primary-color);
  display: flex;
  align-items: center;
}

.badge {
  background: var(--secondary-color);
  color: white;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
  margin-left: 1rem;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-input {
  padding: 10px 20px;
  border: 2px solid #eee;
  border-radius: 25px;
  width: 250px;
  transition: all 0.3s ease;
}

.search-input:focus {
  outline: none;
  border-color: var(--secondary-color);
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.search-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  color: #666;
  padding: 8px;
  transition: transform 0.3s ease;
}

.search-btn:hover {
  transform: scale(1.1);
}

.data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.data-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  position: relative;
  box-shadow: var(--card-shadow);
  transition: transform 0.3s ease;
  border-left: 4px solid var(--secondary-color);
}

.data-card:hover {
  transform: translateY(-5px);
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.icon {
  font-size: 1.5rem;
  margin-right: 10px;
}

.data-id {
  color: #7f8c8d;
  font-size: 0.9rem;
}

.data-content {
  position: relative;
  line-height: 1.6;
  padding-bottom: 1.5rem;
}

.hover-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hover-content.active {
  opacity: 1;
}

.detail-btn {
  background: var(--secondary-color);
  color: white;
  border: none;
  padding: 6px 15px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.9rem;
}

.data-tag {
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 5px 15px;
  border-radius: 15px;
  color: white;
  font-size: 0.8rem;
  box-shadow: var(--card-shadow);
}

.pagination-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.pagination-btn {
  padding: 8px 20px;
  border: none;
  border-radius: 25px;
  background: #f0f0f0;
  color: var(--primary-color);
  cursor: pointer;
  transition: all 0.3s ease;
}

.pagination-btn:hover:not(:disabled) {
  background: var(--secondary-color);
  color: white;
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-indicator {
  display: flex;
  gap: 5px;
}

.page-number {
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.page-number:hover {
  background: #f0f0f0;
}

.page-number.active {
  background: var(--secondary-color);
  color: white;
}

.ellipsis {
  padding: 0 10px;
}

.page-size-selector select {
  padding: 8px 15px;
  border: 2px solid #eee;
  border-radius: 25px;
  background: white;
}

.skeleton-loader {
  display: grid;
  gap: 1rem;
}

.skeleton-item {
  background: #f0f0f0;
  height: 100px;
  border-radius: 8px;
  animation: skeleton-loading 1.5s infinite ease-in-out;
}

@keyframes skeleton-loading {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

@media (max-width: 768px) {
  .header-section {
    flex-direction: column;
    gap: 1rem;
  }

  .data-grid {
    grid-template-columns: 1fr;
  }

  .pagination-wrapper {
    flex-direction: column;
    gap: 1rem;
  }
}
</style>